<template>
	<view class="hotelSearchList">
		<view class="hotelHeader">
			<view class="hearder-content">
				<view class="header-left">
					<view class="hleft">
						微山湖
					</view>
					<view class="hright" @click="showTimePopup">
						<view class="hrtext">
							<text class="zhu">住</text>{{startTime1}}
						</view>
						<view>
							<text class="zhu">离</text>{{endTime1}}
						</view>

					</view>
					<view class="timePop">
						<fui-bottom-popup :show="popupShow" @close="closeTimePopup">
							<view class="timeHeader">
								请选择日期
								<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="closeTimePopup"></image>
							</view>
							<view class="fui-custom__wrap">
								<fui-calendar type="3" showLunar @change="calendarChange" activeBackground='#35743D'></fui-calendar>
							</view>
							<fui-button text="完成" background="#35743D" width='96%' height="72rpx" :margin="['10', '17rpx']" radius='50rpx' @click="closeTimePopup"></fui-button>
						</fui-bottom-popup>
					</view>

				</view>
				<view class="header-right">
					<view class="hed-img">
						<image :src="baseOssUrl+'icon/fdajing.png' " mode=""></image>
					</view>
					<input type="text" v-model="inpTitle" @confirm='goEnter' placeholder="输入关键字/景点/位置等" />
					<!-- <fui-input class="seach-input" size="26r" backgroundColor='#F4F4F4' :bottomLeft="0" borderTop placeholder="输入关键字/景点/位置等" v-model="inpTitle" @input='goEnter'></fui-input> -->
			
				</view>
			</view>
			<view class="hearder-screen">
				<fui-filter-bar :items="filterItems" @change="filterChange" activeColor="#a31b03"></fui-filter-bar>
			</view>
		</view>

		<view class="hotelContent padding25" v-if="hoteldList.length !==0">
			<view class="hotel-details padding25">
				<view class="hotel-list" v-for="(item,index) in hoteldList" :key='index' @click='goDetails(item)'>
					<view class="left-pn">
						<image :src="baseOssUrl2 + item.headPhoto" mode=""></image>
					</view>
					<view class="right-text">
						<view class="pn1">
							{{item.title}}
							<!-- <text class="pn2">经济型</text> -->
						</view>

						<!-- <view class="pn3">“环境超好”5000+消费
							<view class="pingfen">
								4.6分
							</view>
						</view> -->
						<view class="pn5">距您直线{{distance(latitude,longitude,item.latitude,item.longitude)}}公里</view>
						<view class="pn-label">
							<view class="pn-info">
								<!-- <view class="pn-items" v-for="(it,index) in pnItems" :key='index'>
									{{it}}
								</view> -->    
								<view class="pn-items" v-if="item.hotelType">
									{{item.hotelType }} 
								</view>
								<view class="pn-items" v-if="item.foodService">
									{{item.foodService}} 
								</view>
								<view class="pn-items" v-if="item.cleanService">
									{{item.cleanService}} 
								</view>
								<view class="pn-items" v-if="item.deskService">
									{{item.deskService}} 
								</view>
							</view>
							<view class="pn6" v-if="item.jgMin&&item.hdJgMin">
								¥{{(item.jgMin)>(item.hdJgMin)? item.hdJgMin:item.jgMin }}
							<text class="pn7">起</text> 
							</view>
							<view class="pn6" v-else>
								¥{{item.jgMin}}
							<text class="pn7">起</text> 
							</view>
						</view>
					</view>
				</view>

			</view>
			<fui-divider v-if="bottomShowText" text="没有更多了"></fui-divider>
		</view>
		<view class="hotelContent padding25" v-else>
			暂无数据
		</view>
		<fui-top-popup :show="show" @close="closePopup" class="headTop">
			<view class="fItems">
				<view v-show="topModel == 0">
					<view class="fItem0">
						<view class="fui-custom__wrap price-custom__wrap">
							<view class="price-rang">
								￥0
								<view class="">
									￥300以上
								</view>
							</view>
							<fui-slider class='progress-style' width='280' background='#35743D' activeColor='#B4B4B4' section showValue
							 @change="sectionChange" :value='minNum' :endValue='maxNum' :max='300' :step='50'></fui-slider>
							 
							<view class="price-introduce">
								<view class="price-items" @click="getRang(item)" v-for="item in priceRang" :class="{'active-rang' :item.id == isRang }">
									{{item.name}}
								</view>

							</view>
						</view>
						<view class="finish-btn">
							<fui-button text="完成" background="#35743D" width='96%' height="73rpx" :margin="['0', '17rpx']" radius='46rpx' @click="pricePopup"></fui-button>
						</view>
					</view>
				</view>
				<!-- 	<view v-show="topModel == 1">
					<view class="fItem1">
						<view class="fPeople">
							<view class="people-list" v-for="(item,index) in pepoleList" :key='index'>
								<view class="list-left">
									{{item.peoplo}}
									<view class="people-age">
										{{item.age}}
									</view>
								</view>
								<view class="list-right">

									<image :src="baseOssUrl + 'icon/jian.png' " mode="" class="jian"></image>
									</images>
									<view class="find-num">
										1
									</view>
									<image :src="baseOssUrl + 'icon/jia.png' " class="jia"></image>
									</images>
								</view>
							</view>
							<view class="buttBtn">
								<fui-button class="button" radius="46rpx" background="#fff" color="#1D1D1D" borderColor="#383838" height='72rpx'>清空</fui-button>
								<fui-button class="button1" radius="46rpx" background="#35743D" height='72rpx'>完成</fui-button>
							</view>

						</view>
					</view>
				</view> -->
				<view v-show="topModel == 1">
				</view>
			</view>
		</fui-top-popup>
		<fui-top-popup :show="showAddress" @close="addreClosePopup" class="headTop">
			<view class="fItems">
				<view v-show="topModel == 2" style="height: 100px;display: flex;">
					<!-- <category :categoryList="categoryList" :subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
					 @categorySubClick="categorySubClick" activeTextColor='#35743D' activeBackgroundColor='#fff'></category> -->
					<text style="width: 35%;">我的附近</text>
					<fui-data-tag mark :options="categoryOp"  activeColor='#35743D' markColor='#35743D' borderColor='#35743D' @change="categoryChange"></fui-data-tag>
				</view>
			</view>
		</fui-top-popup>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import category from '@/components/component/qiyue-category.vue';
	export default {
		components: {
			category
		},
		data() {
			return {
				bottomShowText: false,
				currPage: 0,
				show: false,
				showAddress: false,
				topModel: '',
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				picFlag: true,
				pnItems: [],
				hoteldList: [
					// 	{
					// 	businessLicense: baseOssUrl + 'icon/hotel.png',
					// 	title: '荷源盛夏的民宿（微山荷源盛夏的民宿',
					// 	introduce: '早餐不错啊',
					// 	price: '¥399',
					// 	qi: '起',
					// 	costPrice: '¥499',
					// 	soldNum: '已售 5000+'
					// },
				],
				filterItems: [{
						text: '价格',
						value: '',
						type: 'dropdown',
						active: false
					},
					// {
					// 	text: '人数',
					// 	value: '',
					// 	type: 'dropdown',
					// 	active: false
					// },
					// {
					// 	text: '好评',
					// 	type: 'dropdown',
					// 	value: '',
					// 	active: false
					// }, 
					{
						text: '距离',
						value: '',
						type: 'dropdown',
						active: false
					}
				],
				filterINdex: 1,
				pepoleList: [{
					peoplo: '成人',
					age: '2-12岁'
				}, {
					peoplo: '儿童',
					age: '2岁'
				}, {
					peoplo: '婴儿',
					age: ''
				}, {
					peoplo: '床铺数',
					age: ''
				}],
				minNum: 0,
				maxNum: 100,
				priceRang: [{
					name: '￥0~100',
					id: '0'
				}, {
					name: '￥100~150',
					id: '1'
				}, {
					name: '￥150~200',
					id: '2'
				}, {
					name: '￥200~300',
					id: '3'
				}, {
					name: '￥300以上',
					id: '4'
				}],
				isRang: '0',
				activeTab: 0,
				tabCkindex: '',
				//距离侧边栏
				// name: "我的附近",
				categoryOp: [{
						text: '500m',
						value: 0,
						xz: '500',
						selected:false,
					},
					{
						text: '1km',
						value: 1,
						xz: '1000',
						selected:false,
					},
					{
						text: '3km',
						value: 2,
						xz: '2000',
						selected:false,
					},
					{
						text: '5km',
						value: 3,
						xz: '2000',
						selected:false,
					},
					{
						text: '10km',
						value: 4,
						xz: '4000',
						selected:false,
					},
				],
				subCategoryList: [],
				// 经纬度
				latitude: '', //经度
				longitude: '', //维度
				page: 1,
				limit: 10,
				total: '',
				dataPages:0,
				inpTitle: '',
				ksjg: '', //开始价格
				jsjg: '', //结束价格
				ysjg: '', //以上价格
				ydTime: '', //预约酒店日期
				startTime: '',
				endTime: '',
				staTimevalue: '',
				endTimevalue: '',
				startWeek: '',
				endWeek: '',
				// 住离时间
				popupShow: false,
				defaultAllend: '',
				defaultAllstart: '',
				startTime1: '',
				endTime1: '',
				xzName: '',
				zcfwList:[],//政策服务
				jdList:[], //酒店设施
			}
		},
		onLoad(op) {
			this.longitude = op.longitude
			this.latitude = op.latitude
			console.log("op1", op)

			this.ksjg = op.ksjg
			this.jsjg = op.jsjg
			this.ysjg = op.ysjg
			this.minNum = op.ksjg
			this.maxNum = op.jsjg
			this.ydTime = op.ydTime
			this.startTime = op.startTime
			this.endTime = op.endTime
			this.startTime1 = op.startTime1
			this.endTime1 = op.endTime1
			this.startWeek = op.startWeek
			this.endWeek = op.endWeek
			this.staTimevalue = op.staTimevalue
			this.endTimevalue = op.endTimevalue
			// this.defaultAllstart = op.defaultAllstart
			// this.defaultAllend = op.defaultAllend

			if (op.title == 'undefined') {
				this.inpTitle = ''
			} else {
				this.inpTitle = op.title
			}
		},
		onShow() {
			this.getList()
		},
		created() {},
		mounted() {
			// this.subCategoryList = this.categoryList[0].ar;
		},
	// onReachBottom() {
	// 	console.log("触底11",this.page)
	// 	if (this.page >= 3) {
	// 		console.log("触底", )
	// 		this.bottomShowText = true
	// 		return false
	// 	}else{
	// 		for (var i = 0; i < 10; i++) {
	// 					this.recomImages.push({
	// 						url: baseOssUrl + 'icon/tj.png',
	// 						title: '荷源盛夏的民宿（微山荷源盛夏的民宿',
	// 						introduce: '早餐不错啊',
	// 						price: '¥399',
	// 						qi: '起',
	// 						costPrice: '¥499',
	// 						soldNum: '已售 5000+'
			
	// 					})
	// 				}
	// 		this.page = this.page + 1
	// 	}
	// },
		onReachBottom() {
			console.log("触底11",this.hoteldList.length,this.dataPages)
			if (this.page >= this.dataPages ) {
				this.fui.toast("到底了")
				this.bottomShowText = true
				return false
			}else{
				this.page ++
				this.getList() 
			}
		},
		onPullDownRefresh() {
			console.log('开始');
			this.xzName = ''
			this.minNum = ''
			this.maxNum = ''
			this.page = 1
			this.hoteldList =[]
			this.getList()
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);
		
		},
		methods: {
			// 回车搜索
			goEnter() {
				this.getList()
			},
			getList() {
				if (this.minNum == 300 && this.maxNum == 300) {
					this.ysjg = 300
				} else {
					this.ysjg = ''
				}
				console.log("this.xzName",this.xzName)
				this.$http.get(this.$httpApi.searchList, {
					data: {
						page: this.page,
						limit: this.limit,
						title: this.inpTitle,
						qsjg: this.minNum,
						jsjg: this.maxNum,
						ysjg: this.ysjg,
						ydTime: this.ydTime,
						longitude: this.longitude,
						latitude: this.latitude,
						xz: this.xzName
						
					}
				}).then(res => {
					if (res.code == 0) {
						if(res.pages==1){
							this.hoteldList = res.page
						}else if(res.pages == 0){
							this.hoteldList = []
						}else{
							this.hoteldList = this.hoteldList.concat(res.page)
						}
						this.total = res.total
						this.dataPages = res.pages
						
						this.pnItems = []
						// this.hoteldList.forEach(val => {
						// 	// tag字段 
						// 		this.pnItems.push(val.id,val.name)
							 
						// })
						console.log("list",this.pnItems)
						// this.currPage = res.currPage
						// this.twlongitude = res.longitude
						// this.twlatitude = res.latitude
					}
				})
			},
			goDetails(val) {
				if(val.hotelType){
					this.pnItems.push(val.hotelType) 
				}
				if(val.foodService){
					this.pnItems.push(val.foodService) 
				}
				if(val.deskService){
					this.pnItems.push(val.deskService) 
				}
				if(val.cleanService){
					this.pnItems.push(val.cleanService) 
				}
				// 政策服务 residenceLimit invoice residenceTime pet
				if(val.residenceLimit){
					this.zcfwList.push(val.residenceLimit) 
				}
				if(val.invoice){
					this.zcfwList.push(val.invoice) 
				}
				if(val.residenceTime){
					this.zcfwList.push(val.residenceTime) 
				}
				if(val.pet){
					this.zcfwList.push(val.pet) 
				}
				if(val.parkingLot){
					this.jdList.push(val.parkingLot) 
				}
				
				if(val.wifi){
					this.jdList.push(val.wifi) 
				}
				if(val.deskService){
					this.jdList.push(val.deskService) 
				}
				if(val.foodService){
					this.jdList.push(val.foodService) 
				}
				if(val.cleanService){
					this.jdList.push(val.cleanService ) 
				}
				console.log("hottt",this.pnItems,this.zcfwList)
				uni.navigateTo({
					url: "/pages/hotelDetails/index?id=" + val.id + '&ydTime=' + this.ydTime + '&startTime=' + this.startTime +
						'&endTime=' + this.endTime + '&startWeek=' + this.startWeek + '&endWeek=' + this.endWeek + '&staTimevalue=' +
						this.staTimevalue + '&endTimevalue=' + this.endTimevalue + '&hotelTitle=' + val.title + '&address=' + val.address +
						'&pnItems=' + JSON.stringify(this.pnItems) + '&hotlPhone=' + val.phone + '&hotelGuide=' + val.guide +
						'&hotelFacilities=' + val.facilities+ '&unPolicy=' + val.unPolicy  + '&unDate=' + val.unDate + '&zcfwList=' + JSON.stringify(this.zcfwList)  + '&jdList=' +  JSON.stringify(this.jdList)
					//unPolicy 取消政策1,2，政策服务zcfwList（入驻限制，是否开发票，时间限制（逗号分隔的v），是否携带宠物）
				})
			},
			// 用户选择时间
			calendarChange(e) {
				this.staTimevalue = e.value[0]
				this.endTimevalue = e.value[1]
				// this.startTime = e.lunar[0].cMonth + '月' + e.lunar[0].cDay + '日'
				// this.endTime = e.lunar[1].cMonth + '月' + e.lunar[1].cDay + '日'
				// 搜索列表展示的时间
				this.startTime1 = e.lunar[0].cMonth + '-' + e.lunar[0].cDay
				this.endTime1 = e.lunar[1].cMonth + '-' + e.lunar[1].cDay
				this.startTime = e.lunar[0].cMonth + '月' + e.lunar[0].cDay + '日'
				this.endTime = e.lunar[1].cMonth + '月' + e.lunar[1].cDay + '日'
				// // 星期几
				this.startWeek = e.lunar[0].ncWeek
				this.endWeek = e.lunar[1].ncWeek
			},
			//调用此方法显示时间底部弹出层
			showTimePopup(type) {
				this.popupShow = true
			},
			closeTimePopup(type) {
				this.popupShow = false
				let arr = this.fui.getAllDate(this.staTimevalue, this.endTimevalue)
				this.ydTime = arr.join(',')
				this.getList()
			},

			// 经纬度距离
			distance: function(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
					Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
			// end
			closePopup() {
				this.show = false
			},
			addreClosePopup() {
				this.showAddress = false
			},
			pricePopup() {
				this.show = false
				this.getList()
			},
			onTabClick(e) {
				this.tabCkindex = e.index
			},
			onChange(e) {
				const index = e.index
			},
			filterChange(e) {
				this.topModel = e.index;
				if (this.topModel == 0) {
					this.show = true;
				} else if (this.topModel == 1) {
					this.show = false;
					this.picFlag = !this.picFlag
				} else if (this.topModel == 2) {
					this.showAddress = true;
				}

			},
			// 控制进度条
			//区间选择返回数据
			sectionChange(e) {
				
			},
			getRang(val) {
				switch (val.id) {
					case '0':
						this.minNum = 0
						this.maxNum = 100
						this.isRang = '0'
						break;
					case '1':
						this.minNum = 100
						this.maxNum = 150
						this.isRang = '1'
						break;
					case '2':
						this.minNum = 150
						this.maxNum = 200
						this.isRang = '2'
						break;
					case '3':
						this.minNum = 200
						this.maxNum = 300
						this.isRang = '3'
						break;
					case '4':
						this.minNum = 300
						this.maxNum = 300
						this.isRang = '4'
						break;
				}
			},
			// categoryMainClick(category) {
			// 	console.log("123", category)
			// 	this.subCategoryList = category.ar;
			// },
			categoryChange(e) {
				console.log("change", e)
				this.categoryOp.forEach(val => {
					if (e.detail.value == val.value) {
						console.log("val", val)
						this.xzName = val.xz
					}
					console.log("xzName", this.xzName)
				})
				this.showAddress = false
				this.getList()
			},
			categorySubClick(category) {},


		},


	}
</script>

<style lang="scss" scoped>
	.hotelSearchList {
		height: 100%;

		.hotel-list {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left-pn {
				width: 30%;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 200rpx;
					margin-right: 16rpx;
				}
			}

			.right-text {
				// background-color: skyblue;
				font-size: 28rpx;
				color: #1D1D1D;
				width: 66%;

				.pn1 {
					font-size: 32rpx;
					margin-top: 8rpx;
					font-weight: bold;

					.pn2 {
						margin-left: 10rpx;
						color: #7E7E7D;
					}

				}

				.pn3 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #35743D;
					margin-top: 14rpx;
					font-size: 28rpx;

					.pingfen {
						margin-left: 10rpx;
						padding: 0 8rpx;
						height: 34rpx;
						background: #35743D;
						color: #FFFFFF;
						text-align: center;
						line-height: 34rpx;
						border-radius: 25rpx 0 25rpx 25rpx;
						font-size: 22rpx;
					}
				}

				.pn4 {
					width: 54rpx;
					height: 34rpx;
					color: #585858;
				}

				.pn5 {
					margin-top: 12rpx;
					color: #585858;
					font-size: 28rpx;
				}

				.pn-label {

					// overflow: hidden;
					.pn-info {
						max-width: 80%;
					}

					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 14rpx;

					.pn-items {

						float: left;
						background: #F8F8F8;
						// height: 30rpx;
						font-size: 26rpx;
						color: #B4B4B4;
						line-height: 30rpx;
						padding: 4rpx;
						margin: 4rpx 5rpx;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    white-space: nowrap;
					    width: 115rpx;

					}

					.pn6 {
						text-align: right;
						color: #D93C3C;
						font-size: 30rpx;

						.pn7 {
							padding-left: 5rpx;
							color: #1D1D1D;
							font-size: 20rpx;
						}

						.pn8 {
							margin: 0 20rpx;
							color: #B4B4B4;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
				}




			}
		}

		.hotelHeader {
			background-color: #FFFFFF;
			padding-top: 20rpx;

			.hearder-content {
				background-color: #F4F4F4;
				width: 686rpx;
				margin: 0 auto;
				display: flex;
				border-radius: 45rpx;
				padding: 6rpx 0;

				.header-left {
					width: 35%;
					// background-color: pink;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 32rpx;
					border-right: 1px solid #D8D8D8;

					.hleft {
						color: #35743D;
						font-size: 26rpx;

					}

					.hright {
						font-size: 24rpx;
						margin-right: 24rpx;
						padding: 10rpx;

						.hrtext {
							margin-bottom: 8rpx;
						}

						.zhu {
							color: #B1B1B1;
							margin-right: 10rpx;
						}
					}

					// 时间选择的弹窗
					.timePop {

						// 选择日历
						.timeHeader {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 30rpx 0;
							position: relative;

							image {
								position: absolute;
								right: 45rpx;
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}

				.header-right {
					width: 65%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 26rpx;
					margin-left: 24rpx;
					
					.hed-img{
						width: 10%;
						image {
							// margin-right: 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
					// input{
					// 	::-webkit-input-placeholder { /* WebKit browsers */ 
					// 	color: red; 
					// 	}
					// }
				}
			}

			.hearder-screen {
				/deep/.fui-filter__bar-text {
					font-size: 32rpx !important;
				}

				/deep/.fui-filter__bar-wrap {
					padding-top: 10rpx !important;
				}
			}
		}

		.hotelContent {
			    padding-bottom: 80rpx;
			.hotel-details {
				background-color: #FFFFFF;
				padding-top: 24rpx;
				margin-top: 18rpx;
				border-radius: 10rpx;
				
				.hotel-list{
					padding-bottom: 24rpx;
					border-bottom: 1px solid #E0E0E0;
					&:last-child{
						border-bottom:0
					}
				}
			}
		}

		.headTop {
			.fItems {
				width: 686rpx;
				margin: 0 auto;
			    padding: 40rpx 0;

				.fItem0 {

					.fui-custom__wrap {
						// height: 100rpx;
						padding: 30rpx 0;

						.price-introduce {
							padding: 0 20rpx;
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;
							margin-top: 50rpx;

							.price-items {
								float: left;
								background: #F8F8F8;
								height: 32rpx;
								font-size: 24rpx;
								color: #B4B4B4;
								line-height: 32rpx;
								padding: 6rpx 10rpx;
								margin: 8rpx 15rpx;
								// padding: 14rpx 20rpx;

							}

							.active-rang {
								border: 1px solid #35743D;
							}


							.active-rang {
								border: 1px solid #35743D;
							}

						}
					}

					.price-custom__wrap {
						.price-rang {
							display: flex;
							justify-content: space-between;
							padding: 0rpx 20rpx 35rpx;
							color: #7E7E7E;
							font-size: 24rpx;
						}

						.progress-style {
							/deep/.fui-slider__wrap-outer {
								width: 90%;
								margin: 0 2%;
							}

						}

					}
				}

				.fItem1 {
					.fPeople {
						.people-list {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #EDEDED;
							height: 40rpx;
							padding: 24rpx 0;
							width: 94%;
							margin: 0 3%;
							color: #1D1D1D;

							.list-left {
								.people-age {
									font-size: 22rpx;
								}
							}

							.list-right {
								display: flex;
								justify-content: flex-end;
								align-items: center;

								.find-num {
									padding: 0 20rpx;
								}

								image {
									margin: 0 20rpx;
									width: 30rpx;
									height: 30rpx;

									&:last-child {
										margin-right: 0;
									}
								}

							}
						}

						.buttBtn {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;

							.button {
								width: 196rpx;
							}

							.button1 {
								width: 440rpx;
							}
						}
					}
				}

				.fItem3 {
					page {
						background: #fff;
						font-weight: normal;
					}

					.fui-vtabs-content__item {
						width: 100%;
						box-sizing: border-box;
						overflow: hidden;
					}

					.fui-img {
						width: 100%;
						height: 268rpx;
						display: block;
						margin-top: 24rpx;
					}

					.fui-content--box {
						width: 100%;
						padding: 30rpx 24rpx 40rpx;
						box-sizing: border-box;
					}

					.fui-title {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
					}

					.fui-descr {
						display: block;
						font-size: 24rpx;
						padding-top: 24rpx;
					}

				}
			}
		}
	}

	/* 自定义内容区样式需自行控制 */
	.fui-custom__wrap {
		// width: 100%;
		// height: 520rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}
</style>
